<template>
  <div class="openDetail">
    <hr style="border: none">
    <!--<div>-->
      <!--<hr style="border: none">-->
      <!--<el-form :inline="true" :model="queryForm.data" class="demo-form-inline">-->
        <!--<el-form-item>-->
          <!--<el-input clearable v-model="queryForm.data.userName" placeholder="报修人姓名"></el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item>-->
          <!--<el-button type="primary" @click="queryFormSubmit()" icon="el-icon-search">查询</el-button>-->
        <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<el-button type="primary" size="small" @click="$router.push({ name: 'repaire-add-or-update'})"-->
                 <!--icon="el-icon-plus">添加-->
      <!--</el-button>-->
    <!--</div>-->
    <hr>
    <div>
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="报修类型" prop="repaireName">
        </el-table-column>

        <el-table-column label="报修人" prop="userName"></el-table-column>
        <el-table-column label="维修人" prop="repairemanName"></el-table-column>
        <el-table-column prop="repaireStatus" label="维修状态">
          <template slot-scope="scope">
            <p v-if="scope.row.repaireStatus=='0'">
              未维修
            </p>
            <p v-else-if="scope.row.repaireStatus=='1'">
              维修中
            </p>
            <p v-else-if="scope.row.repaireStatus=='2'">
              维修完成
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="600" prop="rid">
          <template slot-scope="scope">
            <el-button size="small" type="primary" @click="$router.push({name:'repaire-getOrder',params:{id:scope.row.rid}})"
                       icon="el-icon-edit">详细信息
            </el-button>
            <el-button size="small" type="danger" @click="deleteItem(scope.$index, scope.row)"
                       icon="el-icon-delete">删除
            </el-button>

          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pages.currentPage" :page-sizes="pages.pageSizeList"
                     :page-size="pages.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pages.total"
                     prev-text="上一页"
                     next-text="下一页" background>
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    data () {
      return {
        loading: false,
        url: {
          queryPage: '/baoxiu/repaire/getAllRepaireByRepaireStatus',
          delete: '/baoxiu/repaire/delete'
        },
        pages: {
          total: 0,
          currentPage: 1,
          pageSize: 20,
          pageSizeList: [2, 20, 40, 100]
        },
        tableData: [],
        queryForm: {
          dialogFormVisible: false,
          data: {
            current: 1,
            size: 10,
            userName: ''
          }
        }
      }
    },
    methods: {
      handleSizeChange: function (val) {
        this.pages.pageSize = val
        this.queryFormSubmit()
      },
      handleCurrentChange: function (val) {
        this.pages.currentPage = val
        this.queryFormSubmit()
      },
      // 加载列表页
      queryFormSubmit: function () {
        this.queryForm.data.current = this.pages.currentPage
        this.queryForm.data.size = this.pages.pageSize
        this.loading = true
        this.$http
          .get(this.$http.adornUrl(this.url.queryPage), {
            params: this.queryForm.data
          })
          .then(({data}) => {
            this.loading = false
            this.tableData = data.records
            console.log(this.tableData, 'tableData')
            this.pages.total = data.total
          })
      },
      // 删除记录
      deleteItem: function (index, row) {
        this.$confirm('此操作将删除报修记录' + row.repaireName + ', 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$http
              .get(this.$http.adornUrl(this.url.delete), {
                params: {id: row.rid}
              })
              .then(
                () => {
                  this.$message({
                    type: 'success',
                    message: '删除成功!',
                    duration: 1500,
                    onClose: () => {
                      this.queryFormSubmit()
                    }
                  })
                }
              )
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    },
    created: function () {
      this.queryFormSubmit()
    }
  }
</script>

<style scoped>
</style>
